<template>
  <div class="home-container">
    <!-- 欢迎卡片 -->
    <a-card class="welcome-card">
      <template #title>
        <div class="welcome-title">
          <icon-user class="avatar-icon" />
          <div class="welcome-text">
            <h3>欢迎回来，{{ userStore.username }}</h3>
            <p>今天是 {{ currentDate }}，祝您使用愉快！</p>
          </div>
        </div>
      </template>
      <div class="quick-actions">
        <a-button type="primary">
          <template #icon><icon-plus /></template>
          新增电影
        </a-button>
        <a-button>
          <template #icon><icon-calendar /></template>
          排片管理
        </a-button>
        <a-button>
          <template #icon><icon-file /></template>
          票务管理
        </a-button>
        <a-button>
          <template #icon><icon-dashboard /></template>
          数据统计
        </a-button>
      </div>
    </a-card>

    <!-- 数据概览 -->
    <div class="stats-cards">
      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon blue">
            <icon-file-video />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.movies }}</div>
            <div class="stat-label">电影数量</div>
          </div>
        </div>
        <div class="stat-chart">
          <a-progress
            :percent="70"
            :show-text="false"
            size="small"
            status="normal"
            animation
          />
          <div class="stat-trend positive">
            <icon-arrow-rise />
            <span>12.5%</span>
          </div>
        </div>
      </a-card>
      
      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon green">
            <icon-ticket />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.sessions }}</div>
            <div class="stat-label">今日场次</div>
          </div>
        </div>
        <div class="stat-chart">
          <a-progress
            :percent="85"
            :show-text="false"
            size="small"
            status="success"
            animation
          />
          <div class="stat-trend positive">
            <icon-arrow-rise />
            <span>8.3%</span>
          </div>
        </div>
      </a-card>
      
      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon orange">
            <icon-shopping-cart />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.orders }}</div>
            <div class="stat-label">今日订单</div>
          </div>
        </div>
        <div class="stat-chart">
          <a-progress
            :percent="65"
            :show-text="false"
            size="small"
            status="warning"
            animation
          />
          <div class="stat-trend positive">
            <icon-arrow-rise />
            <span>5.2%</span>
          </div>
        </div>
      </a-card>
      
      <a-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon purple">
            <icon-user-group />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.users }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </div>
        <div class="stat-chart">
          <a-progress
            :percent="90"
            :show-text="false"
            size="small"
            status="normal"
            animation
          />
          <div class="stat-trend positive">
            <icon-arrow-rise />
            <span>15.7%</span>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 左侧：热映电影 -->
      <a-card class="movie-list-card">
        <template #title>
          <div class="card-title-with-extra">
            <span>热映电影</span>
            <a-button type="text">查看全部</a-button>
          </div>
        </template>
        <div class="movie-list">
          <a-empty v-if="movies.length === 0" description="暂无电影数据" />
          <div v-else class="movie-grid">
            <div class="movie-card" v-for="movie in movies" :key="movie.id">
              <div class="movie-poster">
                <img :src="movie.poster" :alt="movie.title" />
                <div class="movie-rating">
                  <icon-star-fill class="star-icon" />
                  <span>{{ movie.rating }}</span>
                </div>
              </div>
              <div class="movie-info">
                <h4 class="movie-title">{{ movie.title }}</h4>
                <p class="movie-category">{{ movie.category }}</p>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 右侧：统计图表和公告 -->
      <div class="right-section">
        <a-card class="chart-card">
          <template #title>
            <div class="card-title-with-extra">
              <span>票房统计</span>
              <a-radio-group type="button" size="small" v-model="chartPeriod">
                <a-radio value="day">日</a-radio>
                <a-radio value="week">周</a-radio>
                <a-radio value="month">月</a-radio>
              </a-radio-group>
            </div>
          </template>
          <div class="chart-placeholder">
            <div class="chart-bars">
              <div class="chart-bar" v-for="(value, index) in salesData" :key="index" :style="{ height: `${value}%` }"></div>
            </div>
            <div class="chart-labels">
              <span v-for="(label, index) in salesLabels" :key="index">{{ label }}</span>
            </div>
          </div>
        </a-card>
        
        <a-card class="notice-card">
          <template #title>
            <span>系统公告</span>
          </template>
          <a-list :max-height="300">
            <a-list-item v-for="notice in notices" :key="notice.id">
              <div class="notice-item">
                <div class="notice-content">
                  <h4>{{ notice.title }}</h4>
                  <p>{{ notice.content }}</p>
                </div>
                <div class="notice-time">{{ notice.time }}</div>
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '../../store/user';

const userStore = useUserStore();

// 当前日期
const currentDate = computed(() => {
  const now = new Date();
  return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
});

// 统计数据
const stats = ref({
  movies: 128,
  sessions: 64,
  orders: 237,
  users: 2547
});

// 图表周期
const chartPeriod = ref('week');

// 销售数据（模拟）
const salesData = ref([30, 45, 75, 60, 80, 65, 90, 70]);
const salesLabels = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日', '今天']);

// 电影数据（模拟）
const movies = ref([
  {
    id: 1,
    title: '流浪地球2',
    poster: 'https://via.placeholder.com/150x200/4080FF/FFFFFF?text=流浪地球2',
    rating: '9.2',
    category: '科幻 / 冒险'
  },
  {
    id: 2,
    title: '满江红',
    poster: 'https://via.placeholder.com/150x200/165DFF/FFFFFF?text=满江红',
    rating: '8.7',
    category: '剧情 / 历史'
  },
  {
    id: 3,
    title: '独行月球',
    poster: 'https://via.placeholder.com/150x200/4080FF/FFFFFF?text=独行月球',
    rating: '8.5',
    category: '喜剧 / 科幻'
  },
  {
    id: 4,
    title: '长空之王',
    poster: 'https://via.placeholder.com/150x200/165DFF/FFFFFF?text=长空之王',
    rating: '8.8',
    category: '动作 / 战争'
  }
]);

// 系统公告（模拟）
const notices = ref([
  {
    id: 1,
    title: '系统更新通知',
    content: '淘票票系统将于2023年6月1日进行版本更新，届时将新增更多功能。',
    time: '2023-05-28'
  },
  {
    id: 2,
    title: '端午节放映安排',
    content: '端午节期间影院放映场次将有所调整，请各位注意安排。',
    time: '2023-05-25'
  },
  {
    id: 3,
    title: '新片审核规则更新',
    content: '为了提高审核效率，系统优化了新片上线审核流程，请参阅更新文档。',
    time: '2023-05-20'
  }
]);

onMounted(() => {
  // 在实际应用中，这里可以发起API请求获取首页数据
  console.log('首页加载完成');
});
</script>

<style scoped>
.home-container {
  padding: 0;
}

.welcome-card {
  margin-bottom: 24px;
}

.welcome-title {
  display: flex;
  align-items: center;
}

.avatar-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary-light-3);
  color: var(--color-primary-6);
  margin-right: 16px;
}

.welcome-text h3 {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--color-text-1);
}

.welcome-text p {
  margin: 0;
  color: var(--color-text-3);
}

.quick-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  height: 130px;
}

.stat-content {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-right: 16px;
  font-size: 24px;
}

.stat-icon.blue {
  background-color: rgba(64, 128, 255, 0.1);
  color: #4080FF;
}

.stat-icon.green {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00B42A;
}

.stat-icon.orange {
  background-color: rgba(255, 125, 0, 0.1);
  color: #FF7D00;
}

.stat-icon.purple {
  background-color: rgba(134, 56, 252, 0.1);
  color: #8638FC;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-1);
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: var(--color-text-3);
}

.stat-chart {
  margin-top: 12px;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 4px;
}

.stat-trend.positive {
  color: #00B42A;
}

.stat-trend.negative {
  color: #F53F3F;
}

.content-area {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 16px;
}

.movie-list-card, .right-section {
  height: 100%;
}

.right-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-card {
  flex: 1;
}

.card-title-with-extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.movie-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}

.movie-card:hover {
  transform: translateY(-5px);
}

.movie-poster {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-rating {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffcc00;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.star-icon {
  margin-right: 2px;
  font-size: 12px;
}

.movie-info {
  padding: 10px 0;
}

.movie-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-category {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-3);
}

.chart-placeholder {
  height: 200px;
  display: flex;
  flex-direction: column;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
  padding: 0 10px;
}

.chart-bar {
  width: 24px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, rgba(64, 128, 255, 0.5), rgba(64, 128, 255, 0.9));
  margin: 0 10px;
  transition: height 0.5s;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-top: 10px;
  color: var(--color-text-3);
  font-size: 12px;
}

.chart-labels span {
  flex: 1;
  text-align: center;
}

.notice-card {
  flex: 1;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.notice-content {
  flex: 1;
  overflow: hidden;
}

.notice-content h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-1);
}

.notice-content p {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-time {
  font-size: 12px;
  color: var(--color-text-3);
  margin-left: 16px;
  white-space: nowrap;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .content-area {
    grid-template-columns: 1fr;
  }
  
  .right-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .right-section {
    grid-template-columns: 1fr;
  }
}
</style> 